// @flow
import React, { Component } from 'react';

import './Editable.scss';

type Props = {
    id: string,
    editType: string,
    EditableIds: Array<string>,
    placeholder?: string,
    value: string,
    editableInputRef: any,
    onEditablItemChange(value: string): void,
    onEditableItemDoubleClick(id: string): void
};

class Editable extends Component<Props> {
    render() {
        const {
            id,
            editType,
            EditableIds,
            placeholder,
            value,
            onEditablItemChange,
            onEditableItemDoubleClick,
            editableInputRef
        } = this.props;
        return (
            <input
                id={`editableItem_${editType}-${id}`}
                ref={editableInputRef}
                className="Editable-input"
                type="text"
                readOnly={EditableIds.indexOf(id) === -1}
                placeholder={placeholder}
                value={value}
                onDoubleClick={e => {
                    onEditableItemDoubleClick(e.target.id);
                }}
                onChange={e => {
                    onEditablItemChange(e.target.value);
                }}
            />
        );
    }
}

export default Editable;
